<template>

	<view class="">

		<view class="cl-cell-group">

			<view style="height: 20px;">

			</view>

			<div class="cl-cell-group_body">

				<view class="cl-cell" style="height:70px">
					<view class="cl-cell__body">
						<view class="body__left">
							<view class="title">头像</view>
						</view>
						<view class="body__right">
							<view class="right-value">
								<u--image :src="User.avatar" shape="circle" width="50px" height="50px"
									@tap="chooseimage"></u--image>
							</view>
							<view class="right-icon">
								<uni-icons type="forward" size="16" color="#999"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="cl-cell" style="height:50px">
					<view class="cl-cell__body">
						<view class="body__left">
							<view class="title">昵称</view>
						</view>

						<view class="body__right" @click="Tourl('/pages/center/seting/nickname?name=' + User.nickname)">
							<view class="right-value">
								<slot name="value">{{ User.nickname ? User.nickname : '-' }}</slot>
							</view>
							<view class="right-icon">
								<uni-icons type="forward" size="16" color="#999"></uni-icons>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="cl-cell" style="height:50px">
					<view class="cl-cell__body">
						<view class="body__left">
							<view class="title">手机号</view>
						</view>
				
						<view class="body__right" @click="Tourl('/pages/user/seting/phone')" v-if="!User.mobile">
							<view class="right-value">
								<slot name="value">{{User.mobile ? User.mobile : '未绑定'}}</slot>
							</view>
							<view class="right-icon">
								<uni-icons type="forward" size="16" color="#999"></uni-icons>
							</view>
						</view>
						
						<view class="body__right" v-else>
							<view class="right-value">
								<slot name="value">{{User.mobile}}</slot>
							</view>
							<view class="right-icon">
								<uni-icons type="forward" size="16" color="#999"></uni-icons>
							</view>
						</view>
						
					</view>
				</view> -->

			</div>


		</view>

	</view>

</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		components: {
			
		},
		data() {
			return {
				sex: '',
				User: {},
				themeColor: ' #FFB702',
				separ: '',
				userInfo: {
					birthday: '',
				},
				province: '',
				city: '',
				area: '',
			}
		},
		onShow() {
			this.getUser()
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: this.User.field,
					success: r => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					}
				})
			},
			changeavatar() {

			},
			onCancel(){},
			async getUser() {
				try {
					const res = await $H.post('user/info', {}, {
						token: true
					});
					this.User = res.data;
				} catch (error) {

				} finally {}
			},
			// 获取到的用户信息
			async updatedUserInfoEvent(info) {
				try {
					const res = await $H.post('user/setInfo', {
						field: 'nickname',
						value: info.nickname // 用实际的昵称替换这里的占位符
					}, {
						token: true
					});
					
					
					
				} catch (error) {

				} finally {
					this.getUser()
				}
				try {
					const res = await $H.post('user/setInfo', {
						field: 'avatar',
						value: info.avatar // 用实际的昵称替换这里的占位符
					}, {
						token: true
					});
				} catch (error) {

				} finally {
					this.getUser()
					this.showAuthorizationModal = false
				}
			},
			async selectSex() {
				const arr = ['保密', '男', '女']
				uni.showActionSheet({
					itemList: arr,
					success: (res) => {
						$H.post('user/setInfo', {
							field: 'sex',
							value: res.tapIndex // 用实际的昵称替换这里的占位符
						}, {
							token: true
						}).then(res => {
							this.getUser()
						})
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			birthdayClose() {
				this.showBirthday = false
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				$H.post('user/setInfo', {
					field: 'birthday',
					value: this.userInfo.birthday // 用实际的昵称替换这里的占位符
				}, {
					token: true
				}).then(res => {
					this.getUser()
				})
			},
			Tourl(url) {
				uni.navigateTo({
					url: url
				})
			},
			chooseimage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						var imageSrc = res.tempFilePaths[0];
						var token = uni.getStorageSync('token')
						uni.uploadFile({
							url: this.$url + 'upload/image',
							filePath: imageSrc,
							header:{ token },
							name: 'file',
							fileType: 'image',
							success: (res) => {
								if (res.code = 1) {
									let data = JSON.parse(res.data)
									this.imgs = data.data.uri
									setTimeout(() => {
										$H.post('user/setInfo', {
											field: 'avatar',
											value: this.imgs // 用实际的昵称替换这里的占位符
										}, {
											token: true
										}).then(res => {
											this.getUser()
										})
									}, 500)
								}
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				});
			},
		}
	}
</script>


<style>
	page {
		background: #f8f8f8;
	}
</style>


<style lang="scss" scoped>
	.cl-cell-group {
		padding: 0 25rpx;

		.cl-cell-group_header {
			padding-left: 30rpx;
			padding-right: 10rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				color: #8b8b8b;
			}

			.label {
				font-size: 24rpx;
				color: #8b8b8b;
			}
		}

		.cl-cell-group_body {
			background-color: #f3f3f3;
			border-radius: 25rpx;
			overflow: hidden;
		}

	}

	view {
		box-sizing: border-box;
	}

	.disabled {
		background-color: rgba(255, 255, 255, 0.5) !important;

		.title,
		.uni-icons,
		.label {
			color: #ccc !important;
		}
	}

	.active {
		&:active {
			background-color: #f5f5f5;
		}
	}

	.cl-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding-left: 30rpx;
		box-sizing: border-box;

		.cl-cell__icon {
			margin-right: 30rpx;
			line-height: 1;
		}

		.cl-cell__body {
			position: relative;
			height: 100%;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f7f7f7;
			padding: 25rpx 0;

			.body__left {
				max-width: 70%;
				width: 30%;
				.title {
					font-size: 28rpx;
					color: #333;
				}

				.label {
					font-size: 24rpx;
					color: #a1a2a6;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.body__right {
				flex: 1;
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;

				.right-value {
					font-size: 28rpx;
					color: #666;

					image {
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}


				.right-icon {
					color: #808083;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>